$(function () {

  var initTime = 5000
  // 去往答题页面
  const answerList = []
  const audio = document.getElementById('aud1')
  const video = $('#video').get(0)
  const topBar = $('.top-box')
  const progressBar = $('.progress-bar .b')
  const answerPage = $('.answer-page')
  const answerBtn = $('.answer-btn')
  const chooseOne = $('.choose-1')
  const chooseTwo = $('.choose-2')
  const chooseThree = $('.choose-3')
  const nextBtn = $('.next-btn')
  const viderBox = $('.vider-box')
  const answerMask = $('.answer-page .answer-mask')
  const drawGraph = $('.graph-content')
  const drawGraph2 = $('.graph-content2')
  const homePage = $('.home-page')
  const jiaPage = $('.jia-page')
  const nicePage = $('.nice-page')
  const onePage = $('.one-page')
  const niceMask = $('.nice-page .nice-mask')
  // 加载页面
  NumAutoPlusAnimation('loading-arrow', {
    time: initTime,
    num: 100,
    regulator: 30
  })

  setTimeout(function () {
    $('#loading').fadeOut(500);
  }, initTime + 500);

  // 背景音乐
  $('.bg-mp3').click(function() {
    $(this).toggleClass('close')
    if ($(this).hasClass('close')) {
      audio.pause()
    } else {
      audio.play()
    }
  })

  // 封面
  $('.fm-start').click(function() {
    audio.play()
    $('.bg-mp3').fadeIn(500)
    $('#fm').fadeOut(500)
    $('.top-box').fadeIn(500)
    setTimeout(() => {
      $('.first-page-tips').fadeIn(500)
    }, 1000);
    setTimeout(() => {
      $('.first-page-tips').fadeOut(500)
      $('.first-page .box').fadeIn(500)
    }, 4000);
  })

  // 第一页选择
  $('.first-page .err-btn').click(function () {
    $('.first-page .err').fadeIn(500)
    progressBar.width('10%')
    answerBtn.fadeIn(1000)
  })

  $('.first-page .ok-btn').click(function () {
    $('.first-page .ok').fadeIn(500)
    progressBar.width('10%')
    answerBtn.fadeIn(1000)
  })

  // video.setAttribute('src', 'images/0.mp4')
  video.setAttribute('x5-video-player-type', 'h5')
  video.setAttribute('x-webkit-airplay', true)
  video.setAttribute('x5-video-player-fullscreen', true)
  video.setAttribute('x5-video-ignore-metadata', true)
  video.setAttribute('object-fit', 'fill')
  video.setAttribute('object-position', 'center center')
  video.setAttribute('playsinline', '')

  enableInlineVideo(video)
  // enableInlineVideo(audio)
  
  // 解锁数据故事
  answerBtn.click(function() {
    const step = $('body').attr('step') | 0
    $(`.tab${step}`).addClass('active')
    $(this).fadeOut(500)
    $('.first-page').fadeOut(500)
    setTimeout(() => {
      $('.choose-btn').removeClass('active').parent().removeClass('is-choose')
    }, 500);
    console.log(step);
    switch (step) {
      case 0:
        goToGraphPage0();
        break;
      case 1:
        goToGraphPage1();
        break;
      case 2:
        goToGraphPage2();
        break;
      case 3:
        goToGraphPage3();
        break;
      case 4:
        goToGraphPage4();
        break;
      default:
        break;
    }
  })

  // 视频播放完毕事件
  // video.addEventListener('ended', function () {
  //   goToAnswerPage()
  // }, false);

  // 顶部菜单栏跳转
  $('.progress-box').on('click', '.active', function() {
    answerBtn.hide()
    nextBtn.css({
      'background-image': `url(images/next-btn.png)`,
      top: '19.5rem',
      right: '2rem',
      width: '6.3rem',
      height: '3.0rem'
    })
    const step = $(this).attr('index') | 0
    $('body').attr('step', step)

    console.log("=======4====="+step);
    switch (step) {
      case 0:
        goToGraphPage0();
        break;
      case 1:
        goToGraphPage1();
        break;
      case 2:
        goToGraphPage2();
        break;
      case 3:
        goToGraphPage3();
        break;
      case 4:
        goToGraphPage4();
        break;
      default:
        break;
    }
  })

  // 直接跳过视频播放
  nextBtn.click(function () {
    const currentIndex = $('.progress-box .active').last().attr('index') | 0
    let step = $('body').attr('step') | 0
    if (step < currentIndex) {
      step = step + 1
      $('body').attr('step', step)
      console.log("=======3====="+step);
      switch (step) {
        case 0:
          goToGraphPage0();
          break;
        case 1:
          goToGraphPage1();
          break;
        case 2:
          goToGraphPage2();
          break;
        case 3:
          goToGraphPage3();
          break;
        case 4:
          goToGraphPage4();
          break;
        default:
          break;
      }
    } else {
      goToAnswerPage()
    }
  })

  // 前往答题页面
  function goToAnswerPage() {
    let step = $('body').attr('step') | 0
    if (!step) {
      step = 1
    } else {
      step = step + 1
    }
    
    if (step === 5) {
      answerBtn.hide()
      console.log(answerList)
      goToLastPage()
      return
    }
    drawGraph.hide();
    drawGraph2.hide();
    homePage.hide(0);
    showAnswerPage()
    console.log("===1======="+answerList+"===="+step)
    $('body').attr('step', step)

    answerMask.css('background-image', `url(images/newbg${step}.png)`)

    switch (step) {
      case 1:
        chooseOne.css({
          top: '8.6rem',
          left: '7.9rem',
          width: '19.3rem',
        })
        chooseTwo.css({
          top: '11.3rem',
          left: '7.9rem',
          width: '17rem',
        })
        chooseThree.hide()
        progressBar.width('30%')
        break;
      case 2:
        chooseOne.css({
          top: '8.6rem',
          left: '7.9rem',
          width: '19.3rem',
        })
        chooseTwo.css({
          top: '11.3rem',
          left: '7.9rem',
          width: '17rem',
        })
        chooseThree.hide()
        progressBar.width('50%')
        break;
      case 3:
        chooseOne.css({
          top: '8.8rem',
          left: '5.7rem',
          width: '10.5rem',
        })
        chooseTwo.css({
          top: '8.8rem',
          left: '17.5rem',
          width: '10.8rem',
        })
        chooseThree.show().css({
          top: '11.5rem',
          left: '12rem',
          width: '10.8rem',
        })
        progressBar.width('70%')
        break;
      case 4:
        chooseOne.css({
          top: '10rem',
          left: '7.7rem',
          width: '7.8rem',
        })
        chooseTwo.css({
          top: '10rem',
          left: '18.2rem',
          width: '7.8rem',
        })
        chooseThree.hide()
        progressBar.width('91%')
        break;
      case 5:
        chooseOne.css({
          top: '10rem',
          left: '7.7rem',
          width: '7.8rem',
        })
        chooseTwo.css({
          top: '10rem',
          left: '18.2rem',
          width: '7.8rem',
        })
        chooseThree.hide()
        nextBtn.css({
          'background-image': `url(images/last-btn.gif)`,
          'top': '19.5rem',
          'right': '2rem',
          'width': '9rem',
          'height': '2.5rem',
        })
        progressBar.width('91%')
        break;
      default:
        break;
    }
  }

  // 选项一按钮
  chooseOne.click(function () {
    if (!$(this).parent().hasClass('is-choose')) {
      $(this).addClass('active').parent().addClass('is-choose')
      answerList.push(0)
      answerBtn.fadeIn(500)
      console.log("===5=======")
    }
  })

  // 选项二按钮
  chooseTwo.click(function () {
    if (!$(this).parent().hasClass('is-choose')) {
      $(this).addClass('active').parent().addClass('is-choose')
      answerBtn.fadeIn(500)
      answerList.push(1)
      console.log("===6=======")
    }
  })

  // 选项三按钮
  chooseThree.click(function () {
    if (!$(this).parent().hasClass('is-choose')) {
      $(this).addClass('active').parent().addClass('is-choose')
      answerBtn.fadeIn(500)
      answerList.push(2)
      console.log("===7=======")
    }
  })

  // 显示答题页
  function showAnswerPage() {
    let step = $('body').attr('step') | 0
    if (step === 6) {
      // 调整下一步按钮文案
    }
    viderBox.fadeOut(500)
    $('#video').css({
      width: '1px',
      height: '1px'
    })
    console.log("===2=======")
    nextBtn.fadeOut(200)
    answerPage.fadeIn(500)
    answerBtn.fadeOut(0)
  }

  // 前往视频播放
  function goToVideoPlayPage() {
    answerPage.fadeOut(500)
    nextBtn.fadeIn(200)
    $('#video').css({
      width: '100%',
      height: '100%'
    })
    viderBox.fadeIn(500).css('display', 'flex')
    video.currentTime = 0
    video.play()
  }
//前往图表页
  function goToGraphPage0(){
    $('#firstPage-graph1').show()
    $('#firstPage-graph2').show()

    onePage.fadeIn(100)
    answerMask.fadeOut(500)
    nicePage.fadeOut(500)
    nextBtn.fadeOut(500)
    drawGraph.show();
    draw();
    setTimeout(() => {
      $('#firstPage-graph1').hide()
      draw1();
    }, 5000);
    setTimeout(() => {
      $('#firstPage-graph1').hide()
      $('#firstPage-graph2').hide()
      onePage.fadeOut(500)
      niceMask.css('background-image', `url(images/word-xiaofei2.png)`)
      nicePage.fadeIn(200)
      nextBtn.fadeIn(200);
    }, 11000);
  }


  //前往旅游图表页
  function goToGraphPage1(){
    answerBtn.fadeOut(500)
    answerPage.fadeOut(500)
    // answerMask.fadeOut(0)
    niceMask.css('background-image', `url(images/word1-lvyoub1.png)`)
    niceMask.fadeIn(200)
    setTimeout(() => {
      niceMask.fadeOut(0)
      niceMask.css('background-image', `url(images/word1-lvyoub2.png)`)
      niceMask.fadeIn(200)
      // nextBtn.fadeIn(200)
    }, 6000);
    setTimeout(() => {
      niceMask.fadeOut(0)
      niceMask.css('background-image', `url(images/word1-lvyou2.png)`)
      niceMask.fadeIn(200)
      nextBtn.fadeIn(200)
    }, 12000);
  }

  //前往居家数据页
  function goToGraphPage2(){
    // homePage.fadeOut(500)
    answerBtn.fadeOut(500)
    answerPage.fadeOut(500)
    // niceMask.fadeOut(500)
    niceMask.css('background-image', `url(images/word-jujiaa1.png)`)
    homePage.fadeIn(500)
    niceMask.fadeIn(200)
    setTimeout(() => {
      niceMask.fadeOut(0)
      homePage.fadeOut(100)
      niceMask.css('background-image', `url(images/word-jujiaa3.png)`)
      niceMask.fadeIn(200)
      nextBtn.fadeIn(200)
    }, 6000);
    // nextBtn.fadeIn(200)
  }


  //前往就业篇数据页
  function goToGraphPage3(){
    answerBtn.fadeOut(500)
    answerPage.fadeOut(500)
    niceMask.css('background-image', `url(images/word-jiuyea1.png)`)
    nicePage.fadeIn(200)
    setTimeout(() => {
      niceMask.fadeOut(0)
      niceMask.css('background-image', `url(images/word-jiuye2.png)`)
      niceMask.fadeIn(200)
      nextBtn.fadeIn(200)
    }, 6000);
  }
  //前往文娱篇数据页
  function goToGraphPage4(){
    $('#firstPage-graph3').show()
    answerPage.fadeOut(500)
    nicePage.fadeOut(200)
    niceMask.css('background-image', `url(images/word-wenyu3.png)`)
    nicePage.fadeIn(200)
    // onePage.fadeIn(200)
    nextBtn.fadeOut(0)
    drawGraph2.show();
    draw4();
    setTimeout(() => {
      $('#firstPage-graph3').hide()
      niceMask.fadeOut(0)
      niceMask.css('background-image', `url(images/word-wenyu.png)`)
      niceMask.fadeIn(200)
      nextBtn.fadeIn(200)
    }, 7000);
  }
  // 去最后一页
  function goToLastPage() {
    topBar.hide(0)
    nextBtn.hide(0)
    answerPage.hide(0)
    viderBox.hide(0)
    nicePage.hide(0)
    showLastPageText()
    $('.last-page').fadeIn(500)
  }

  // 显示最后一页逻辑
  function showLastPageText() {

    // 旅游，网购，观影
    $('#share-title').attr('src', `images/${answerList[1]}-${answerList[0]}-${answerList[3]}.png`)
    var index = Math.floor(Math.random() * 3)
    console.log(answerList)
    console.log(index)
    // 就业
    if (answerList[2] === 0) {
      $('#share-text1').attr('src', `images/sub1-1-${index}.png`)
    } else if (answerList[2] === 1) {
      $('#share-text1').attr('src', `images/sub1-2-${index}.png`)
    } else {
      $('#share-text1').attr('src', `images/sub1-3-${index}.png`)
    }

    // 居住
    if (answerList[0] === 0) {
      $('#share-text2').attr('src', `images/sub2-1-${index}.png`)
    } else {
      $('#share-text2').attr('src', `images/sub2-2-${index}.png`)
    }
  }

  // 分享按钮
  $('.share-btn').click(function() {
    $('.last-page .mask').fadeIn(500)
  })

  $('.last-page .mask').click(function() {
    $('.last-page .mask').fadeOut(500)
  })


  // ===========================================================================
  // helpers
  function NumAutoPlusAnimation(targetEle, options) {
    options = options || {}
    var $this = document.getElementById(targetEle),
      time = options.time || $this.data('time'),      // 总时间
      finalNum = options.num || $this.data('value'),  // 要显示的真实数值
      regulator = options.regulator || 100,           // 调速器
      step = finalNum / (time / regulator),           // 默认 30ms
      count = 0,
      initial = 0

    var timer = setInterval(function () {
      count = count + step
      if (count >= finalNum) {
        clearInterval(timer)
        count = finalNum
      }
      var t = Math.floor(count)
      if (t == initial) return
      initial = t
      $this.innerHTML = initial + '%'
    }, 30)
  }

})